
var oRel=$('#not-rel');
var oTab=$('#not-tab1');
var oPage=$('.not-page');
var oBtn5=$('.not-btn5');
var oPut=$('.not-put1');
//开始加载页面时获取数据
// var Notdata= JSON.parse(localStorage.getItem('data')) || [];
var index=JSON.parse(localStorage.getItem('oindex')) || 0;
var res=[]; //最终渲染的数据

var data=JSON.parse(localStorage.getItem('data'));



var reletime;
function colick() {
    let time=new Date();
    let y=time.getFullYear();
    let m=time.getMonth()+1;
    let d=time.getDate();
    let h=time.getHours();
    let mi=time.getMinutes();
    reletime=+y+'/'+m+'/'+d+'  '+h+':'+mi;
}
//渲染函数创建tr里面的样式
function render(){
    oTab.find('tbody').html('');
    for (var i=0;i<res.length;i++) {
        oTab.find('tbody').append('<tr data-index="'+res[i].index+'">' +
            '<td><span class="not-span0">★</span></td>' +
            '<td>'+res[i].text+'</td>' +
            '<td>' +
            '<button type="button" class="btn btn-danger btn-xs pow-btn" data-toggle="modal" data-target="#myModal">\n' + '删除\n' + '</button>\n' +
            '<div class="modal fade" tabindex="-1" id="myModal">\n' +
            '<div class="modal-dialog">\n' + '<div class="modal-content">\n' +
            '<div class="modal-header">\n' +
            '<button type="button" class="close" data-dismiss="modal" ><span>&times;</span>' + '</button>\n' +
            '<h4 class="modal-title" id="myModalLabel">温馨提示</h4>\n' +
            '</div>\n' +
            '<div class="modal-body">\n' + '确定删除？\n' +
            '</div>\n' +
            '<div class="modal-footer">\n' +
            '<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>\n' +
            '<button type="button" class="btn btn-primary not-del" data-dismiss="modal">确定</button>\n' +
            '</div>\n' +
            '</div>\n' +
            '</div>\n' +
            '</div>' +
            '</td>' +
            '<td><span class="not-span0">'+res[i].time+'</span></td>' +
            '</tr>');
    }
    //渲染之后把这些样式作为数据存入Notdata数组
    localStorage.setItem('data',JSON.stringify(data));
    localStorage.setItem('index',JSON.stringify(index));
}
//点击选项卡时获取数据
$('#btn1').click(function () {
    // JSON.parse(localStorage.getItem('data'));
    $('#not-div1').css({
        'display':'block'
    });
    $('#not-div3').css({
        'display':'none'
    })
});
//详情页面显示且获取内容
$('#not-tab1').on('click','.not-a1',function () {
    $('.not-p1').html($(this).parent().text());
    $('#not-div9').css({
        // marginTop:-150,
        display:'block',
    });


});
//详情页面隐藏
// $('#not-btn3').click(function () {
//     $('#not-div9').css({
//         // marginTop:-150,
//         display:'none',
//     })
// })
$('#btn2').click(function () {
    $('#not-div3').css({
        'display':'block'
    });
    $('#not-div1').css({
        'display':'none'
    })
});
//点击发布时渲染创建数据存入数组，并清除编辑器
var notreg = //;
oRel.click(function () {
    index++;
    colick();
    // let obj=[];
    // obj.text =$('textarea').val();
    // obj.time = reletime;
    // obj.index=index;
    data['board'].unshift({
            text:$('textarea').val(),
            person:'管理员'  ,
            time:reletime,
            oindex:index,
        });
    getPageNum();
    getPageData(1);
    $('textarea').val('');
    $('#not-div1').css({
        'display':'block'
    });
    $('#not-div3').css({
        'display':'none'
    }) ;
    localStorage.setItem('data',JSON.stringify(data));
});

//删除创建tr和数据
oTab.on('click','.not-del',function () {
    var n=$(this).parents('tr').index();

    data['board'].splice(n,1);
  // for (var i=0;i<Notdata.length;i++) {
  //     if (Notdata[i].index==n) {
  //         Notdata.splice(i,1)
  //     }
  // }
    getPageNum();
    getPageData(1);
    $('.modal-backdrop').remove();
});
function getPageNum() {
    var pageNum=Math.ceil(data['board'].length/5);
    oPage.html('');
    for(var i=0;i<pageNum;i++){

        var oLi=$('<li><span>'+(i+1)+'</span></li>');

        oPage.append(oLi);

        if(i==0){
            oLi.addClass('active');
        }
    }
}
getPageNum();
//获取某一页的数据
function getPageData(index) {
    res=data['board'].slice((index-1)*5,5*index);
    render();
}
getPageData(1);
//点击页码 获取当页的数据
oPage.on('click','li',function () {
    getPageData($(this).children(':first').text());
    $(this).addClass('active').siblings('li').removeClass('active');

});

// var curr = {
//     'time-table':
//         {
//             'one': 12,
//             'two': 15,
//             'three': 12,
//             'four': 15,
//             'five': 12
//         }
// };
// localStorage.setItem('curr',JSON.stringify(curr));

//声明一个数组页面加载时获取数据
// var curr['time-table']=JSON.parse(localStorage.getItem('curr'))||[];
var classes=JSON.parse(localStorage.getItem('classes'))||[];
//点击确认按钮让table变得不可编辑，保存数据，本身不可以点击
$('.not-fix').click(function () {
    $('.not-td2').attr({
        contenteditable:false
    });
    $('.not-td1').attr({
        contenteditable:false
    });
    $(this).attr('disabled','false');

//每一天的值声明变量，赋值给curr的对应名字
    classes={
        1:{
					class1:$('.not-td1:eq(0)').html(),
          class2:$('.not-td1:eq(5)').html(),
          class3:$('.not-td1:eq(10)').html(),
          class4:$('.not-td1:eq(15)').html(),
          class5:$('.not-td1:eq(20)').html()
        },
        2:{
          class1:$('.not-td1:eq(1)').html(),
          class2:$('.not-td1:eq(6)').html(),
          class3:$('.not-td1:eq(11)').html(),
          class4:$('.not-td1:eq(16)').html(),
          class5:$('.not-td1:eq(21)').html()
        },
        3:{
          class1:$('.not-td1:eq(2)').html(),
          class2:$('.not-td1:eq(7)').html(),
          class3:$('.not-td1:eq(12)').html(),
          class4:$('.not-td1:eq(17)').html(),
          class5:$('.not-td1:eq(22)').html()
        },
        4:{
          class1:$('.not-td1:eq(3)').html(),
          class2:$('.not-td1:eq(8)').html(),
          class3:$('.not-td1:eq(13)').html(),
          class4:$('.not-td1:eq(18)').html(),
          class5:$('.not-td1:eq(23)').html()
        },
        5:{
          class1:$('.not-td1:eq(4)').html(),
          class2:$('.not-td1:eq(9)').html(),
          class3:$('.not-td1:eq(14)').html(),
          class4:$('.not-td1:eq(19)').html(),
          class5:$('.not-td1:eq(24)').html()
        }
    };
    //数据的存储，声明为curr的json对象再存入currdata的数组
    localStorage.setItem('classes',JSON.stringify(classes));
});

//点击编辑时让table变得可编辑并且清除确认按钮的属性
$('.not-edit').click(function () {
    $('.not-td2').attr({
        contenteditable:true
    });
    $('.not-td1').attr({
        contenteditable:true
    });
    $(this).siblings().removeAttr('disabled');
});
$('.not-edit2').click(function () {
    $('.not-td2').attr({
        contenteditable:true
    });
    $(this).siblings().removeAttr('disabled');
});
function loop() {
//在渲染时把curr里的数据赋值给对应的表格

    $('.not-td1').eq(0).html(classes[1].class1);
    $('.not-td1').eq(5).html(classes[1].class2);
    $('.not-td1').eq(10).html(classes[1].class3);
    $('.not-td1').eq(15).html(classes[1].class4);
    $('.not-td1').eq(20).html(classes[1].class5);
    //数组第二条。所以currdata变成1
    $('.not-td1').eq(1).html(classes[2].class1);
    $('.not-td1').eq(6).html(classes[2].class2);
    $('.not-td1').eq(11).html(classes[2].class3);
    $('.not-td1').eq(16).html(classes[2].class4);
    $('.not-td1').eq(21).html(classes[2].class5);

    $('.not-td1').eq(2).html(classes[3].class1);
    $('.not-td1').eq(7).html(classes[3].class2);
    $('.not-td1').eq(12).html(classes[3].class3);
    $('.not-td1').eq(17).html(classes[3].class4);
    $('.not-td1').eq(22).html(classes[3].class5);

    $('.not-td1').eq(3).html(classes[4].class1);
    $('.not-td1').eq(8).html(classes[4].class2);
    $('.not-td1').eq(13).html(classes[4].class3);
    $('.not-td1').eq(18).html(classes[4].class4);
    $('.not-td1').eq(23).html(classes[4].class5);

    $('.not-td1').eq(4).html(classes[5].class1);
    $('.not-td1').eq(9).html(classes[5].class2);
    $('.not-td1').eq(14).html(classes[5].class3);
    $('.not-td1').eq(19).html(classes[5].class4);
    $('.not-td1').eq(24).html(classes[5].class5);

}
// console.log($('.not-td1').eq(0).html())
// console.log(currdata[0].one)
loop();



//查找功能测试
oBtn5.click(function () {
    var str=oPut.val();
    $('#not-tab1 tr').hide();//将原有的内容隐藏
    if (str=='') {
        $('#not-tab1 tr').show()
    }
    for (var i=0;i<data['board'].length;i++){
           if (str=='') {                 
               return
           }                              
         var lin=JSON.stringify(data['board'][i] );
           console.log(lin);
        if (lin.search(str)==-1){

        }
        else {
            oTab.find('tbody').append('<tr>' +
                '<td><span class="not-span0">★</span></td>' +
                '<td>'+res[i].text+'<a href="javascript:;" class="not-a1">详情</a></td>' +
                '<td>' +
                '<button type="button" class="btn btn-danger btn-xs pow-btn" data-toggle="modal" data-target="#myModal">\n' + '删除\n' + '</button>\n' +
                '<div class="modal fade" tabindex="-1" id="myModal">\n' +
                '<div class="modal-dialog">\n' + '<div class="modal-content">\n' +
                '<div class="modal-header">\n' +
                '<button type="button" class="close" data-dismiss="modal" ><span>&times;</span>' + '</button>\n' +
                '<h4 class="modal-title" id="myModalLabel">温馨提示</h4>\n' +
                '</div>\n' +
                '<div class="modal-body">\n' + '确定删除？\n' +
                '</div>\n' +
                '<div class="modal-footer">\n' +
                '<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>\n' +
                '<button type="button" class="btn btn-primary not-del" data-dismiss="modal">确定</button>\n' +
                '</div>\n' +
                '</div>\n' +
                '</div>\n' +
                '</div>' +
                '</td>' +
                '<td><span class="not-span0">'+res[i].time+'</span></td>' +
                '</tr>');


        }
    }
});

